<template>
   <el-container class="layout-container-demo" style="height: 500px">
     <el-aside width="200px">
       <el-scrollbar>
         <el-menu :default-openeds="['1', '3']">
           <el-sub-menu index="1">
             <template #title>
               <el-icon><Avatar /></el-icon>人员管理
             </template>
             <el-menu-item-group>
               <el-menu-item index="1-1">
                <RouterLink to="/emp">
                   人员信息
                </RouterLink>
              </el-menu-item>
               <el-menu-item index="1-2">人员添加</el-menu-item>
             </el-menu-item-group>
           </el-sub-menu>
           <el-sub-menu index="2">
             <template #title>
               <el-icon><icon-menu /></el-icon>员工管理
             </template>
             <el-menu-item-group>
               <el-menu-item index="2-1">
                <RouterLink to="/person">  
                员工信息
                </RouterLink> 
              </el-menu-item>
               <el-menu-item index="2-2">
                <RouterLink to="/personSave">
                添加员工
                </RouterLink>
              </el-menu-item>
             </el-menu-item-group>
           </el-sub-menu>
         </el-menu>
       </el-scrollbar>
     </el-aside>
 
     <el-container>
       <el-header style="text-align: right; font-size: 12px">
         <div class="toolbar">
         </div>
       </el-header>
 
       <el-main>
         <el-scrollbar>
            <!-- 使用子路由显示对应的vue组件 -->
            <RouterView/>
         </el-scrollbar>
       </el-main>
     </el-container>
   </el-container>
 </template>
 
 <script lang="ts" setup>
 </script>
 
 <style scoped>
 .layout-container-demo .el-header {
   position: relative;
   background-color: var(--el-color-primary-light-7);
   color: var(--el-text-color-primary);
 }
 .layout-container-demo .el-aside {
   color: var(--el-text-color-primary);
   background: var(--el-color-primary-light-8);
 }
 .layout-container-demo .el-menu {
   border-right: none;
 }
 .layout-container-demo .el-main {
   padding: 0;
 }
 .layout-container-demo .toolbar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   right: 20px;
 }
 </style>